<template>
  <div>
    <div class="bread">
      <p>首页 》资讯</p>
    </div>
    <div class="zx">
      <!-- 新闻资讯 -->
      <div class="xwzx">
        <p class="title">新闻资讯</p>

        <div class="zs">
          <img
            style="width:574px;height:416px"
            :src="'http://47.110.243.129'+list1[choose].thumb"
            alt
          />

          <div class="liebiao">
            <ul>
              <li
                v-for="(item,index) of list1"
                @mouseover="enter(index)"
                @mouseout="out"
                :key="index"
              >
                <p>{{item.title}}</p>
                <span>{{item.riqi}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="more_bg">
          <p class="more">查看更多</p>
        </div>
        <div class="line"></div>
      </div>
      <!-- 活动公告 -->
      <div class="hdgg">
        <p class="title">活动公告</p>

        <div class="hdgg_parent">
          <div class="show_k" v-for="(item,index) of list2" :key="index">
            <img
              v-if="item.thumb"
              style="width:388px;height:282px"
              :src="'http://47.110.243.129'+item.thumb"
              alt
            />
            <div class="layer">
              <div class="content">{{item.title}}</div>
            </div>
          </div>
        </div>
        <div class="more_bg">
          <p class="more">查看更多</p>
        </div>
        <div class="line"></div>
      </div>
      <!-- 馆务公开 -->
      <div class="gwgk">
        <p class="title">馆务公开</p>

        <div class="gwgk_parent">
          <ul class="li_parent">
            <li v-for="(item,index) of list3" :key="index">
              <p>{{item.title}}</p>
              <span>{{item.keywords}}</span>
            </li>
          </ul>
        </div>
        <div class="more_bg">
          <p class="more">查看更多</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      choose: 1,
      data1: [
        { title: "舟山博物馆2019年度报告", time: "2020/2/5" },
        { title: "舟山博物馆2019年度报告", time: "2020/2/5" },
        { title: "停讲不停练 市博物馆加强讲解员...", time: "2020/2/5" },
        { title: "最多跑一次,舟山博物馆在行动", time: "2020/2/5" },
        { title: "舟山博物馆为馆藏文物准备新居", time: "2020/2/5" },
        { title: "舟山博物馆两大特展迎新春", time: "2020/2/5" },
      ],
      data2: [
        { pic: require("../../assets/image/gz.png"), time: "二月活动预告" },
        { pic: require("../../assets/image/gz.png"), time: "二月活动预告" },
        {
          pic: require("../../assets/image/blue_zsx.png"),
          time: "二月活动预告",
        },
        { pic: require("../../assets/image/gz.png"), time: "二月活动预告" },
        { pic: require("../../assets/image/gz.png"), time: "二月活动预告" },
        {
          pic: require("../../assets/image/blue_zsx.png"),
          time: "二月活动预告",
        },
      ],
      list1: [],
      list2: [{}],
      list3: [{}],
    };
  },
  mounted() {
    this.get1(), this.get2(), this.get3();
  },
  methods: {
    enter(i) {
      this.choose = i;
    },
    out(i) {
      this.choose = 0;
    },
    get1() {
      this.$api
        .get(`http://api.museum24h.com/myidea10/api/list/xinwenzixun`)
        .then((res) => {
          this.list1 = res.data.page.list;
          this.list1 = this.list1.slice(0, 6);
          console.log(this.list1);
        });
    },
    get2() {
      this.$api
        .get(`http://api.museum24h.com/myidea10/api/list/huodonggonggao`)
        .then((res) => {
          this.list2 = res.data.page.list;
          this.list2 = this.list2.slice(0, 6);
          console.log(this.list2);
        });
    },
    get3() {
      this.$api
        .get(`http://api.museum24h.com/myidea10/api/list/guanwugongkai`)
        .then((res) => {
          this.list3 = res.data.page.list;
          this.list3 = this.list3.slice(0, 6);
          console.log(this.list3);
        });
    },
  },
};
</script>
<style scoped>
p,
ul,
li {
  margin: 0px;
  padding: 0px;
}
.zx {
  max-width: 1400px;
  margin: auto;
  margin-top: 20px;
}
.bread {
  max-width: 1150px;

  margin: auto;
}
.xwzx {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  text-align: center;
  padding: 40px 0px;
  box-sizing: border-box;
  background: url("../../assets/image/titlek.png") no-repeat;
  background-position: center;
  margin-bottom: 50px;
  font-size: 36px;
  width: 100%;
}
.zs {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 50px;
}
.liebiao {
  width: 55%;
  font-size: 24px;
  font-weight: 500;
  color: #181818;
}
.liebiao li {
  display: flex;
  justify-content: space-between;

  line-height: 70px;
}
.more_bg {
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
}
.more {
  height: 70px;
  background: url("../../assets/image/more.png");
  background-position: center;
  background-repeat: no-repeat;
  font-size: 24px;
  line-height: 70px;
}
.line {
  width: 100%;
  height: 20px;
  background: rgb(237, 237, 238);
  border-radius: 3px;
}
/* hdgg */
.hdgg {
  padding-top: 30px;
}
.hdgg_parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 65px;
}
.show_k {
  margin-top: 20px;
  margin-bottom: 15px;
}
.layer {
  width: 100%;
  height: 50px;
  background-color: rgba(83, 141, 225);
  position: relative;
  vertical-align: center;
  color: white;
  text-align: center;
  margin-top: -3px;
}
.layer > div {
  position: absolute;
  height: 30px;
  bottom: 0px;
  left: 0px;
  top: 0px;
  right: 0px;

  margin: auto;
}
/* 馆务公开 */
.gwgk {
  padding-top: 30px;
  margin-bottom: 70px;
}
.li_parent {
  margin-bottom: 50px;
}
.li_parent li {
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  line-height: 70px;
  border-bottom: 1px solid rgb(212, 212, 212);
}
</style>